<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            float: left;
        }
    </style>
</head>
<body>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<div>
    <img src="image/a.png">
</div>
<div style="position: relative">
    <img src="image/b.png" id="b">
</div>
<script>
    function getAbsOffset(obj){
        function getAbsOffsetX(obj){
            var x = 0;
            if (obj){
                return x + obj.offsetLeft + getAbsOffsetX(obj.offsetParent);
            } else {
                return 0;
            }
        }
        function getAbsOffsetY(obj){
            var y = 0;
            if (obj){
                return y + obj.offsetTop + getAbsOffsetY(obj.offsetParent);
            } else {
                return 0;
            }
        }
        return {
            left:getAbsOffsetX(obj),
            top:getAbsOffsetY(obj),
        }
    }

    function getMouseInfo(obj,clientObj){
        var oOffsetInfo = getAbsOffset(obj);
        return {
            x:clientObj.clientX-oOffsetInfo.left,
            y:clientObj.clientY-oOffsetInfo.top,
        }
    }

    function createImg(obj,mousePositon,type){
        var img = document.createElement('img');
        if (type == 1){
            img.src = 'image/right.png';
        } else {
            img.src = 'image/wrong.png';
        }

        img.style.width = '20px';
        img.style.position = 'absolute';
        img.style.top=mousePositon.y+'px';
        img.style.left=mousePositon.x+'px';
        obj.appendChild(img);
    }
    var b = document.getElementById('b');
    b.onclick = function(e){
        var flag = 0;
        var mousePositon = getMouseInfo(this,e);
        console.log(mousePositon);
        var okPosition = [
            [124,8,30,20],//x位置，y位置，宽，高
            [20,181,30,20]//x位置，y位置，宽，高
        ];
        for (var i = 0;i<okPosition.length;i++){
            if (mousePositon.x>okPosition[i][0] && mousePositon.y > okPosition[i][1] && mousePositon.x<(okPosition[i][0]+okPosition[i][2]) && mousePositon.y<(okPosition[i][1]+okPosition[i][3])){
                flag = 1;
                createImg(this.parentNode,mousePositon,1);
            }
        }
        if (flag == 0){
            createImg(this.parentNode,mousePositon,0);
        }
    }
</script>


</body>
</html>